<!-- 深入响应式系统 -->
<template>
  <div>
    <div>
      <a-button type="primary">通过get劫持访问</a-button>
      <div>{{ obj.latest }}</div>
    </div>
    <p></p>
    <div>
      <a-button type="primary">通过Proxy劫持访问</a-button>
      <div>{{ this.proxy2.message1 }}</div>
    </div>
    <p></p>
    <div>
      <a-button type="primary" @click="count++">修改组件的值</a-button>
      <div>{{ count }}</div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  /**
   * 监听组件变价，打开后进入页面会有debugger ,注意要放开
   */
  // renderTracked(event) {
  //   console.log(event);
  //   debugger;
  // },
  // renderTriggered(event) {
  //   console.log(event);
  //   debugger;
  // },
  setup() {
    let count = ref(0);
    const obj = {
      log: ["a", "b", "c"],
      get latest() {
        return this.log[this.log.length - 1];
      },
    };
    const target = {
      message1: "hello",
      message2: "everyone",
    };
    const handler2 = {
      get(target, prop, receiver) {
        console.log(target);
        console.log(prop);
        console.log(receiver);
        return "world";
      },
    };
    const proxy2 = new Proxy(target, handler2);
    return {
      obj,
      proxy2,
      count,
    };
  },
};
</script>

<style lang="scss" scoped></style>
